import { computed, defineComponent, ref } from 'vue';
import Animations from './Animations.vue';
import Card from './Card.vue';
import RecipeFacebook from './RecipeFacebook.vue';
import RecipeList from './RecipeList.vue';
import RecipeTable from './RecipeTable.vue';
import RecipeTwitch from './RecipeTwitch.vue';
import RecipeTwitter from './RecipeTwitter.vue';
import RecipeYoutube from './RecipeYoutube.vue';
import Sizing from './Sizing.vue';
import StylingBordered from './StylingBordered.vue';
import StylingColor from './StylingColor.vue';
import StylingCustomBorder from './StylingCustomBorder.vue';
import StylingSquare from './StylingSquare.vue';
import Types from './Types.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Animations</h5>
            <Animations />
          </div>
          <div class='block-'>
            <h5 class='title'>Card</h5>
            <Card />
          </div>
          <div class='block-'>
            <h5 class='title'>RecipeFacebook</h5>
            <RecipeFacebook />
          </div>
          <div class='block-'>
            <h5 class='title'>RecipeList</h5>
            <RecipeList />
          </div>
          <div class='block-'>
            <h5 class='title'>RecipeTable</h5>
            <RecipeTable />
          </div>
          <div class='block-'>
            <h5 class='title'>RecipeTwitch</h5>
            <RecipeTwitch />
          </div>
          <div class='block-'>
            <h5 class='title'>RecipeTwitter</h5>
            <RecipeTwitter />
          </div>
          <div class='block-'>
            <h5 class='title'>RecipeYoutube</h5>
            <RecipeYoutube />
          </div>
          <div class='block-'>
            <h5 class='title'>Sizing</h5>
            <Sizing />
          </div>
          <div class='block-'>
            <h5 class='title'>StylingBordered</h5>
            <StylingBordered />
          </div>
          <div class='block-'>
            <h5 class='title'>StylingColor</h5>
            <StylingColor />
          </div>
          <div class='block-'>
            <h5 class='title'>StylingCustomBorder</h5>
            <StylingCustomBorder />
          </div>
          <div class='block-'>
            <h5 class='title'>StylingSquare</h5>
            <StylingSquare />
          </div>
          <div class='block-'>
            <h5 class='title'>Types</h5>
            <Types />
          </div>
        </div>
      );
    };
  },
});
